<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div slot="center">设置中心</div>
    </nav-bar>

    <div class="user_box">
      <div class="avatar_box"><img class="avatar" src="@/assets/images/avter.png"></div>
      <div class="user_text">
        <span>{{userinfo.username}}</span>
        <span>{{userinfo.nickname}}</span>
      </div>
    </div>

    <div>
      <van-cell to="/scan" title="扫一扫" size="large" is-link>
        <template #icon>
          <div class="icon_box"><van-icon name="saoyisao" class="iconfont" class-prefix='icon' color="#1692f2" size="19" /></div>
        </template>
      </van-cell>

      <van-cell to="/print" title="打印机管理" size="large" is-link>
        <template #icon>
          <div class="icon_box"><van-icon name="dayinji" class="iconfont" class-prefix='icon' color="#1692f2" size="22" /></div>
        </template>
      </van-cell>

<!--      <van-cell title="修改密码" size="large" is-link>-->
<!--        <template #icon>-->
<!--          <div class="icon_box"><van-icon name="xiugaimima" class="iconfont" class-prefix='icon' color="#1692f2" size="22" /></div>-->
<!--        </template>-->
<!--      </van-cell>-->

      <van-cell @click="onExit" title="退出登录" size="large" is-link>
        <template #icon>
          <div class="icon_box"> <van-icon name="tuichudenglu" class="iconfont" class-prefix='icon' color="#1692f2" size="22" /></div>
        </template>
      </van-cell>

    </div>
    <tab-bar :active=4 />
  </div>
</template>

<script>
  import Util from "@/common/util";
  import NavBar from "@/components/common/navbar/NavBar";
  import tabBar from '@/components/content/tabBar';
    export default {
        name: "index",
      components:{
        NavBar,
        tabBar,
      },
      data(){
          return {
            userinfo:'',
          }
      },

      created() {
          this.userinfo = Util.storage.get('userinfo');
      },

      methods:{
        onExit(){
          Util.storage.set('userinfo','');
          this.$router.push('/login')
        }
      }
    }
</script>

<style scoped>
  .user_box{
    display: flex;
    align-items: center;
    padding: .36rem 10px;
    background: #3599ff;
  }
  .avatar_box{
    height: 1.12rem;
  }
  .avatar{
    width: 1.12rem;
    height: 1.12rem;
  }
  .user_text{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 10px;
    font-size: .34rem;
    color: #fff;
  }
  .icon_box{
    margin-right: 10px;
  }
</style>
